<!-- 流程详情中的操作按钮-更多功能-->
<template>
  <van-action-sheet
    v-model:show="showCompo"
    title="更多"
    cancel-text="取消"
    close-on-click-overlay
    @click-overlay="toCancel"
    :style="{ height: '30%' }"
    @cancel="toCancel"
  >
    <div class="content">
      <van-grid :border="false">
        <van-grid-item
          v-for="(item, index) in options"
          :key="index"
          @click="onSelect(item)"
          :style="{ color: item.isActive ? '#1989fa' : '#323233' }"
        >
          <template #icon>
            <i :class="getButtonIcon(item.name)"></i>
          </template>
          <template #text>
            <span class="text-sm">
              {{ item.operation }}
            </span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script setup lang="ts">
  import { PropType, ref, watchEffect } from 'vue';
  import { getButtonIcon } from '@/utils/workflow';

  const props = defineProps({
    showShare: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });
  const emit = defineEmits(['closeShare', 'onSelect']);

  const showCompo = ref(false);

  watchEffect(() => {
    showCompo.value = props.showShare;
  });

  const onSelect = (option: any) => {
    props.options.forEach((item: any) => {
      if (item.name == option.name) {
        item.isActive = true;
      } else {
        item.isActive = false;
      }
    });
    const item = {
      name: option.name,
      operation: option.operation,
      status: option.status,
    };
    emit('onSelect', item);
  };

  const toCancel = () => {
    props.options.forEach((item: any) => {
      item.isActive = false;
    });
    emit('closeShare', false);
  };
</script>

<style scoped lang="scss">
  .content {
    color: #323233;
  }
</style>
